{extend name="base" /}
{block name="css"}{/block}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body">
        <form action="{:request()->url()}" class="layui-form" method="post" enctype="">
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="{$data.name|default=''}" autocomplete="off" placeholder="请输入名称" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                  <textarea name="desc" placeholder="请输入内容" class="layui-textarea">{$data.desc|default=''}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="hidden" name="status" value="0">
                    <input type="checkbox" name="status" value="1" lay-skin="switch" lay-text="启用|禁用" {if isset($data.status) and $data.status eq '1'}checked{/if}>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <input type="hidden" name="rules" value="{$data.rules|default=''}" id="rules">
                    <div id="test13" class="demo-tree-more"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
    var arr = [];
    layui.use(['tree', 'util'], function(){
        var tree = layui.tree
        ,layer = layui.layer
        ,util = layui.util
        //模拟数据1
        ,data = [{
            title: '早餐'
            ,id: 1
            ,children: [{
                title: '油条'
                ,id: 5
            },{
                title: '包子'
                ,id: 6
            },{
                title: '豆浆'
                ,id: 7
            }]
        },{
            title: '午餐'
            ,id: 2
            ,checked: true
            ,children: [{
                title: '藜蒿炒腊肉'
                ,id: 8
            },{
                title: '西湖醋鱼'
                ,id: 9
            },{
                title: '小白菜'
                ,id: 10
            },{
                title: '海带排骨汤'
                ,id: 11
            }]
        },{
            title: '晚餐'
            ,id: 3
            ,children: [{
                title: '红烧肉'
                ,id: 12
            },{
                title: '番茄炒蛋'
                ,id: 13
            }]
        },{
            title: '夜宵'
            ,id: 4
            ,children: [{
                title: '小龙虾'
                ,id: 14
                ,checked: true
            },{
                title: '香辣蟹'
                ,id: 15
                ,disabled: true
            },{
                title: '烤鱿鱼'
                ,id: 16
            }]
        }];
        //无连接线风格
        tree.render({
            elem: '#test13'
            ,data: {:json_encode($region)}
            ,id: 'demoId'   //定义索引
            ,showCheckbox: true
        },'json');
        //按钮事件
        util.event('lay-demo', {
            getChecked: function(othis){
                var checkedData = tree.getChecked('demoId'); //获取选中节点的数据
                var rules = [];
                checkedData.forEach(function(z){
                    rules.push(z.id);
                    if(z.children){
                        z.children.forEach(function(zz){
                            rules.push(zz.id);
                            if(zz.children){
                                zz.children.forEach(function(zzz){
                                    rules.push(zzz.id);
                                });
                            }
                        });
                    }
                });
                $('#rules').val(rules.join(','));
                var form = $(this).parents('form');
                $.post(form.attr('action'),form.serialize(), function(result) {
                    layer.msg(result.msg);
                    setTimeout(function() {
                        location.href = result.url;
                    }, 1000);
                });
                // console.log(rules.join(','))
            }
        });
        
    });
</script>
{/block}